<script setup lang="ts">
  import { ContentWrap } from '@/components/ContentWrap'
  import { Search } from '@/components/Search'
  import { Dialog } from '@/components/Dialog'
  import { useI18n } from '@/hooks/web/useI18n'
  import { ElButton, ElTag } from 'element-plus'
  import { Table } from '@/components/Table'
  import {delTableListApi,getListApi ,getDelcoupom,getAddCouponUsed} from '@/api/table'
  import { useTable } from '@/views/Example/Dialog/useTable'
  import {ChaeCoupon, CouponData} from '@/api/table/types'
  import { h, ref, unref, reactive } from 'vue'
  import Write from './components/Write.vue'
  import Detail from './components/Detail.vue'
  import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
  import { TableColumn } from '@/types/table'
  import {useEmitt} from "@/hooks/web/useEmitt";
  import {push} from "echarts/types/src/component/dataZoom/history";
  import {useRoute, useRouter} from "vue-router";

  const { t } = useI18n()

  const dialogVisible = ref(false)

  const { push } = useRouter()
  const dialogTitle = ref('')

  const { register, tableObject, methods } = useTable<CouponData>({
    getListApi: getListApi,
    delListApi: getDelcoupom,
    response: {
      list: 'list',
      total: 'total'
    }
  })

  const crudSchemas = reactive<CrudSchema[]>([
      {
          field: 'coupon_id',
          label: t('序号'),
          type: 'index'
      },
      {
          field: 'coupon_name',
          label: t('couponDemo.couponName')
      },
      {
          field:'coupon_price',
          label:t('面额'),
      },
      {
          field:'type',
          label:t('使用条件'),
      },
      {
          field: 'start_date',
          label: t('couponDemo.couponTime')
      },
      {
          field: 'end_date',
          label: t('couponDemo.couponTimes')
      },
  ])
  const { allSchemas } = useCrudSchemas(crudSchemas)
  const { getList, setSearchParams } = methods
  getList()

  const delLoading = ref(false)

  const delData = async (row: CouponData | null, multiple: boolean) => {
    tableObject.currentRow = row
    console.log(row)
    const { delList, getSelections } = methods
    const selections = await getSelections()
    delLoading.value = true
    await delList(
            multiple ? selections.map((v) => v.coupon_id) : [tableObject.currentRow?.coupon_id as number],
            multiple
    ).finally(() => {
      delLoading.value = false
    })
  }

  const actionType = ref('')

  const action = (row: CouponData, type: string) => {
    dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail')
    actionType.value = type
    tableObject.currentRow = row
    dialogVisible.value = true
  }

  const writeRef = ref<ComponentRef<typeof Write>>()

  const loading = ref(false)

  const { query } = useRoute()

  const save = async (row: ChaeCoupon  , multiple: boolean) => {
    tableObject.currentRow = row
    const { getSelections } = methods
    const selections = await getSelections()
    /**
     * 选中这行数据获取user_id然后在上传到后端去
     * user_id couponId states
     */
    console.log("获取的user_id：")
    console.log(query.user_id)
    console.log('selections的coupon_id数据：')
      let givedata=ref([])
      for (let i = 0; i < selections.length; i++) {
        givedata.value.push({
          couponId:selections[i].coupon_id,
          userId:query.user_id,
          state:3
        })
      }
    // {str:JSON.stringify(givedata.value)}
      const res = await getAddCouponUsed(
              {str:JSON.stringify(givedata.value)}
      )
      console.log(res)
      if(res){
        push('/example/example-page')
      }
      delLoading.value = true
  }


</script>

<template>
  <ContentWrap>
    <div class="mb-10px">
      <ElButton type="danger" :loading="drLoading" @click="save()">
        {{ t('exampleDemo.save') }}
      </ElButton>
      <ElButton @click="dialogVisible = false">
        {{ t('dialogDemo.close') }}
      </ElButton>
    </div>
    <Table
            v-model:pageSize="tableObject.pageSize"
            v-model:currentPage="tableObject.currentPage"
            :columns="allSchemas.tableColumns"
            :data="tableObject.tableList.slice(
            (tableObject.currentPage - 1) * tableObject.pageSize,
             tableObject.currentPage * tableObject.pageSize)"
            :loading="tableObject.loading"
            :pagination="{
        total: tableObject.total
      }"
            @register="register"

    >
    </Table>
  </ContentWrap>
</template>
